<template>
  <el-container>
    <el-header
      style="display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;">
      <div>
        <svg-icon class="primary" :icon-class="$route.meta.icon"/>
        <span class="primary">{{$route.meta.title}}</span>
      </div>
      <div class="header-button-container">
        <el-button :icon="queryType? 'el-icon-search':'el-icon-close'" type="primary"
                   @click="chooseClick">{{queryType == false?'隐藏':'查询'}}
        </el-button>
        <el-button v-permission="['return.add']" icon="el-icon-plus" type="info" style="margin-left: 10px" @click="addClick">新增
        </el-button>
      </div>
    </el-header>
    <div class="pd10">
      <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType == false">
        <el-date-picker
          v-model="query.date"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-input prefix-icon="el-icon-search" placeholder="单据编号" style="width: 200px;margin-left: 10px"
                  v-model="query.sn"></el-input>
        <span style="margin-left: 10px;font-size: 12px;color: #909399;">单据状态</span>
        <el-select style="margin-left: 5px" v-model="query.status" placeholder="请选择状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="未确认" value="0"></el-option>
          <el-option label="已确认" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
          <el-option label="已取消" value="3"></el-option>
        </el-select>
        <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" @click="queryClick">查询
        </el-button>
        <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" @click="resetClick">
          重置
        </el-button>
      </div>
      <div class="details_card" v-loadMore="[payLoads,'salein-list']" :style="{height:curHeight+'px'}">
        <warehouseList :warehouseForm="warehouseForm" @detailsClick="detailsClick"></warehouseList>
      </div>
    </div>
    <el-footer class="el-footerBox">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                  @pagination="loadOrder" style="margin-bottom: auto"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import loadMore from '@/utils/more.js'
  import {EventBus} from '@/api/eventBus'
  import warehouseList from './components/list'
  import {list} from '@/api/warehouse'
  import Pagination from '@/components/Pagination';
  import utils from '../../utils/utils.js'

  export default {
    name: 'warehouse-list',
    directives: {loadMore,permission},
    activated() {
      this.payLoads = new Date().getTime();
    },
    data() {
      return {
        payLoads:'',
        warehouseForm: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        curHeight: null,
        queryType: false,
        query: {
          status: '',
          date: [],
          sn: ''
        },
        keyword: {
          status: '',
          date: [],
          sn: ''
        },
        pickerOptions: {//时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      };
    },
    components: {
      warehouseList, Pagination
    },
    created() {
      var _this = this
      this.loadOrder()
      EventBus.$on('warehouse-add', res => { // 监听新增完毕
        // 更新列表数组
        _this.warehouseForm.splice(0, 0, res)
      });
      EventBus.$on('warehouse-view', res => { // 监听新增完毕
        // 更新列表数组
        for (var i = 0; i < _this.warehouseForm.length; i++) {
          if (_this.warehouseForm[i].id == res.id) {
            this.$set(this.warehouseForm, i, res)
          }
        }
      })
    },
    mounted() {
      this.comeIn();
      this.beforeMount()
    },
    methods: {
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 270//减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight;
              _this.curHeight = h - 224//减去页面上固定高度height
            }
          })();
        };
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 270//减去页面上固定高度height
      },
      loadOrder() {
        var _this = this;
        let params = new URLSearchParams();
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('status', _this.keyword.status);
        params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '');
        params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : '');
        params.append('sn', _this.keyword.sn);
        params.append('warehouseType',5)
        list(params).then(response => {
          console.log(response)
          _this.warehouseForm = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 270//减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.curHeight = h - 224//减去页面上固定高度height
        }
      },
      queryClick() {
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadOrder()
      },
      resetClick() {
        this.query.date = [];
        this.query.status = '';
        this.query.sn = '';
        this.keyword = this.query;
        this.pageNum = 1;
        this.loadOrder()
      },
      detailsClick(data) {
        this.$router.push({
          path: '/salein/view', query: {id: data}
        })
      },
      addClick() {
        this.$router.push({
          path: '/salein/add'
        })
      },
    }
  }
</script>

<style scoped>
  .details_card {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
  }

  .details_card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
</style>
